<template>
<!-- pages/feedback/feedback.wxml -->
<Tabs :tabs="tabs" @tabsItemChange="handleTabsItemChange">
    <view class="fb_main">
        <view class="fb_title">问题的种类</view>
        <view class="fb_tips">
            <text>功能建议</text>
            <text>购买遇到问题</text>
            <text>性能问题</text>
            <text>其他</text>
        </view>
        <view class="fb_content">
            <textarea :value="textVal" @input="handleTextInput" placeholder="请描述一下您的问题"></textarea>
            <view class="fb_tool">
                <button @tap="handleChooseImg">+</button>
                <view v-for="(item, index) in chooseImgs" :key="index" class="up_img_item" @tap="handleRemoveImg" :data-index="index">
                    <UpImg :src="item"></UpImg>
                </view>
            </view>
        </view>
        <view class="form_btn_wrap">
            <button @tap="handleFormSubmit" type="warn" size="mini">√ 提交</button>
        </view>
    </view>
</Tabs>
</template>

<script>
import Tabs from "../../components/Tabs/Tabs";
import UpImg from "../../components/UpImg/UpImg";

export default {
  data() {
    return {
      tabs: [{
        id: 0,
        value: "体验问题",
        isActive: true
      }, {
        id: 1,
        value: "商品、商家投诉",
        isActive: false
      }],
      // 被选中的图片的路径 数组
      chooseImgs: [],
      // 文本域的内容
      textVal: "",
      // 外网的图片路径数组
      UpLoadImgs: []
    };
  },

  components: {
    Tabs,
    UpImg
  },
  props: {},
  methods: {
    // 标题点击事件 从子组件传递过来
    handleTabsItemChange(e) {
      // console.log(e);
      // 1. 获取被点击的标题索引
      const {
        index
      } = e.detail; // 2. 修改原数组

      let {
        tabs
      } = this;
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false); // 3. 赋值到data中

      this.setData({
        tabs
      });
    },

    // 点击“+” 选择图片
    handleChooseImg() {
      // 调用小程序内置的选择图片api
      wx.chooseImage({
        // 同时选中的图片的数量
        count: 9,
        // 图片的格式 原图 压缩
        sizeType: ['original', 'compressed'],
        // 图片的来源 相册 照相机
        sourceType: ['album', 'camera'],
        success: result => {
          // console.log(result);
          this.setData({
            // 图片数组 进行拼接
            chooseImgs: [...this.chooseImgs, ...result.tempFilePaths]
          });
        }
      });
    },

    // 点击自定义图片组件
    handleRemoveImg(e) {
      // 获取被点击的组件的索引
      const {
        index
      } = e.currentTarget.dataset; // console.log(index);
      // 获取data中的图片数组

      let {
        chooseImgs
      } = this; // 删除元素

      chooseImgs.splice(index, 1);
      this.setData({
        chooseImgs
      });
    },

    // 文本域的输入事件
    handleTextInput(e) {
      this.setData({
        textVal: e.detail.value
      });
    },

    // 提交按钮的点击事件
    handleFormSubmit() {
		uni.navigateBack({
			delta: 1
		});
      // 获取文本域的内容 图片数组
      const {
        textVal,
        chooseImgs
      } = this; // 合法性的验证

      if (!textVal.trim()) {
        // 不合法
        wx.showToast({
          title: '提交成功',
          icon: 'none',
          mask: true
        });
        return;
      } // 准备上传图片到专门的图片服务器
      // 显示正在等待的图片


      // wx.showLoading({
      //   title: "正在上传中",
      //   mask: true
      // }); // 判断有没有需要上传的图片数据

      if (chooseImgs.length != 0) {
        // 上传文件的api不支持多个文件同时上传 需要遍历数组 挨个上传
        chooseImgs.forEach((v, i) => {
          wx.uploadFile({
            // 图片要上传到哪里
            url: 'img.coolcr.cn/index/api.html',
            // 被上传的文件路径
            filePath: v,
            // 上传的文件的名称 后台来会获取文件 file
            name: "image",
            // 额外上传的文本信息
            formData: {},
            success: result => {
              // console.log(result);
              let url = JSON.parse(result.data).url;
              this.UpLoadImgs.push(url); // console.log(this.UpLoadImgs);
              // 所有的图片都上传完毕了才触发

              if (i === chooseImgs.length - 1) {
                wx.hideLoading();
                console.log("提交到后台"); // 提交都成功了
                // 重置页面

                this.setData({
                  textVal: "",
                  chooseImgs: []
                }); // 返回上一个页面

                wx.navigateBack({
                  delta: 1
                });
              }
            }
          });
        });
      } else {
        wx.hideLoading();
        console.log("只提交了文本");
        wx.navigateBack({
          delta: 1
        });
      }
    }

  }
};
</script>
<style>
@import "./feedback.css";
</style>